<template>
	<div class="sw_data_operate">
		<el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="handleCheckboxAllChecked">
			{{ checkedData.length > 0 ? `已选 ${checkedData.length} 项` : '全选' }}
		</el-checkbox>
		<div class="batch_button">
			<el-button-group v-if="checkedData.length > 0">
				<slot name="batch"></slot>
			</el-button-group>
		</div>
		<slot name="button"></slot>
		<show-mode :size="size" v-model="showMode"></show-mode>
	</div>
</template>

<script>
export default {
	props: {
		value: { type: Array, default: () => [] },
		size: { type: String, default: '24' },
		list: { type: Array, default: () => [] },
		mode: { type: String, default: '' }
	},
	data() {
		return {
			checkedData: this.value,
			showMode: this.mode,
			allChecked: false
		};
	},
	computed: {
		isIndeterminate() {
			return this.checkedData.length > 0 && this.checkedData.length !== this.list.length;
		}
	},
	watch: {
		value(arr) {
			this.checkedData = arr;
		},
		checkedData(arr) {
			this.$emit('input', arr);
			this.allChecked = this.list.length === arr.length;
		},
		showMode(val) {
			this.$emit('update:mode', val);
		}
	},
	methods: {
		handleCheckboxAllChecked(flag) {
			this.checkedData = !flag ? [] : this.list.map((n) => n.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_data_operate {
	display: flex;
	align-items: center;
	.el-checkbox {
		flex-shrink: 0;
	}
	.batch_button {
		flex: 1;
		overflow: hidden;
	}
}
</style>
